<script setup>
import { ref, onMounted } from 'vue';

const name = "hello vue";

const carouselImages = [
    "/images/u7.svg",
    "/images/u8.png",
    "/images/u9.png"
];

const zbyugao = ref([]);
const zbgonggao = ref([]);
const zhongbiao = ref([]);
const qiye = ref([]);
const loading = ref(true);

const getData = async () => {
        await new Promise(resolve => setTimeout(resolve, 1000));
        
        zbyugao.value = [
            { title: '【麻城市中心】麻城经济开发区谌家园小学...', date: '2023-04-13' },
            { title: '【麻城市中心】麻城市农村公路管理局招标...', date: '2023-04-13' },
            { title: '【麻城市中心】麻城经济开发区谌家园小学...', date: '2023-04-13' },
            { title: '【汉川市中心】汉川电厂四期扩建工程电力...', date: '2023-04-13' },
            { title: '【红安县中心】红安县2023年度小型水库安...', date: '2023-04-13' }
        ];
        
        zbgonggao.value = [
            { title: '平煤隆基新能源科技有限公司——二期电...', date: '2023-04-13' },
            { title: '2023年第4批电气杂项备件询比价采购...', date: '2023-04-13' },
            { title: '平煤隆基新能源科技有限公司-二期硅烷...', date: '2023-04-13' },
            { title: '云南省中医医院污水运维项目咨询邀请公告...', date: '2023-04-13' },
            { title: '平煤隆基新能源科技有限公司一动力厂房...', date: '2023-04-13' },
        ];
        
        zhongbiao.value = [
            { title: '山东省淄博市山东鑫泉医药有限公司线路迁...', date: '2023-04-13' },
            { title: '张家界旅游学校关于果盆/果盘/果篮的网上...', date: '2023-04-13' },
            { title: '长沙市芙蓉区朝阳小学关于其他广告服务的...', date: '2023-04-13' },
            { title: '沙沟村特色农畜产品电商综合服务中心建设...', date: '2023-04-13' },
            { title: '涟源市工贸中专关于LED头灯的网上超市采...', date: '2023-04-13' },
        ];
        
        qiye.value = [
            { title: '慈利县三合镇国太桥中学关于新鲜水果的...', date: '2023-04-13' },
            { title: '兰陵县第七中学七中2023年保安经费成交公告', date: '2023-04-13' },
            { title: '(XJ023041300027)CG-连接器询价', date: '2023-04-13' },
            { title: '岳阳县公安局关于机械硬盘的网上超市采购.', date: '2023-04-13' },
            { title: '青州市机关事务服务中心车辆保险成交公告', date: '2023-04-13' },
        ];
    
        loading.value = false;
};

onMounted(() => {
    getData();
});
</script>

<template>
    <el-container style="display: flex; flex-direction: column;">
        <el-main style="width: 80% !important; margin: auto !important;">
            <el-carousel height="420px">
                <el-carousel-item v-for="(imgSrc, index) in carouselImages" :key="index">
                    <img :src="imgSrc">
                </el-carousel-item>
            </el-carousel>
            
            <div class="info-modules-container">
                <div class="section">
                    <h3>招标预告</h3>
                    <el-skeleton :animated="true" :loading="loading || !zbyugao.length" >
                        <ul style="list-style: none;">
                            <li v-for="(item, i) in zbyugao" :key="i" style="padding: 10px; display: flex;margin-left:-50px ;">
                                <img src="/images/u19.png" style="width: 50px;"><p>{{ item.title }} <span style="color: #999;">{{ item.date }}</span></p>
                            </li>
                        </ul>
                    </el-skeleton>
                    <router-link to="/information" class="more-link" tag="el-link" type="primary" style="float: right; text-decoration: none;"><img src="/images/u16.png">查看更多</router-link>
                </div>
                <div class="section">
                    <h3>招标公告</h3>
                    <el-skeleton :animated="true" :loading="loading || !zbgonggao.length">
                        <ul style="list-style: none;">
                            <li v-for="(item, i) in zbgonggao" :key="i" style="padding: 10px;display: flex;margin-left:-50px ;">
                                <img src="/images/u19.png" style="width: 50px;"><p>{{ item.title }} <span style="color: #999;">{{ item.date }}</span></p>
                            </li>
                        </ul>
                    </el-skeleton>
                    <router-link to="/information" class="more-link" tag="el-link" type="primary" style="float: right; text-decoration: none;"><img src="/images/u16.png">查看更多</router-link>
                </div>
            </div>
            <div class="info-modules-container">
                <div class="section">
                    <h3>中标公告</h3>
                    <el-skeleton :animated="true" :loading="loading || !zhongbiao.length">
                        <ul style="list-style: none;">
                            <li v-for="(item, i) in zhongbiao" :key="i" style="padding: 10px;display: flex;margin-left:-50px ;">
                                <img src="/images/u19.png" style="width: 50px;"><p>{{ item.title }} <span style="color: #999;">{{ item.date }}</span></p>
                            </li>
                        </ul>
                    </el-skeleton>
                    <router-link to="/information" class="more-link" tag="el-link" type="primary" style="float: right; text-decoration: none;"><img src="/images/u16.png">查看更多</router-link>
                </div>

                <div class="section">
                    <h3>企业采购</h3>
                    <el-skeleton :animated="true" :loading="loading || !qiye.length">
                        <ul style="list-style: none;">
                            <li v-for="(item, i) in qiye" :key="i" style="padding: 10px;display: flex;margin-left:-50px ;">
                                <img src="/images/u19.png" style="width: 50px;"><p>{{ item.title }} <span style="color: #999;">{{ item.date }}</span></p>
                            </li>
                        </ul>
                    </el-skeleton>
                    <router-link to="/information" class="more-link" tag="el-link" type="primary" style="float: right; text-decoration: none;"><img src="/images/u16.png">查看更多</router-link>
                </div>
            </div>
        </el-main>
    </el-container>
</template>

<style scoped>
.el-carousel__item img {
    width: 100%;
    height: 100%;
}

.section {
  position: relative; 
  margin: 10px;
  width: calc(50% - 20px); 
  border: 1px solid #ebeef5;
  border-radius: 4px;
  padding: 0;
  overflow: hidden; 
}

.more-link {
  position: absolute;
  top: 15px;      
  right: 10px;    
  color: #606266; 
  z-index: 1;     
}

.section h3 {
  margin: 0;
  padding: 10px;
  background: linear-gradient(to right, #29c2c0, #ffffff);
  color: #ffffff;
  font-size: 18px;
}

.flex-list {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    padding: 0;
    margin: 10px 0;
    list-style: none;
}

.flex-list li {
    flex: 1 1 200px;
    border: 1px solid #ebeef5;
    padding: 15px;
    border-radius: 4px;
}

.info-modules-container {
    display: flex;
    justify-content: space-between;
}
.section .el-link {
    position: absolute; 
    top: 15px; 
    color:#606266;
    right: 10px; 
}
.section li {
  position: relative; 
  padding: 10px;
  margin-left: 0;
}

.section li span {
  position: absolute; 
  right: 10px; 
  color: #999;
}
</style>